﻿<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
	
	<!-- jQuery references -->
	<link href="css/themes/default/jquery.mobile-1.2.0.min.css"	rel="stylesheet" />
	<link href="css/jqm-docs.css" rel="stylesheet" />
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.2.0.min.js"></script>

	<!-- Wikilookup references -->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAv9eLBwnLgRG2QfwOJvLUBwRrtw1sGTtc&sensor=false&language=vi"></script>
	<script type="text/javascript" charset="utf-8" src="js/googlemap.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/phonegapfunctions.js"></script>
	<script type="text/javascript" src="js/weather.js"></script>
	
	<!-- PhoneGap references -->
	<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
	
	<script type="text/javascript">
	    var latitude, longitude;
	    // Wait for Cordova to load
	    document.addEventListener("deviceready", onDeviceReady, false);

	    var watchID = null;

	    function gotoMap() {
	        window.location.assign("markedbylatlng.html#" + latitude + "@" + longitude + "$");
	    }

	    // Cordova is ready
	    function onDeviceReady() {
	        var options = { timeout: 10000 };
	        watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
	    }

	    // onSuccess Geolocation
	    function onSuccess(position) {
	        latitude = position.coords.latitude;
	        longitude = position.coords.longitude;

	        var element = document.getElementById('geolocation');
	        var data = document.getElementById('datacontent');
	        data.style.display = "block";
	        element.style.display = "none";

	        var datavitri = document.getElementById('datavitri');
	        datavitri.innerHTML += '<b>Vĩ độ: </b>' + position.coords.latitude + '<br/><b>Kinh độ: </b>' + position.coords.longitude;

	        var geocoder = new google.maps.Geocoder();

	        var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
	        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
	            if (status == google.maps.GeocoderStatus.OK) {
	                if (results[1]) {
	                    element.innerHTML = 'Bạn đang ở ' + results[1].formatted_address;
	                    datavitri.innerHTML += '<br/><b>Địa danh: </b>' + results[1].formatted_address;
	                }
	                else { element.innerHTML = 'Không thể định danh được vị trí của bạn!<br/>Bạn đang ở tọa độ:<br/>Kinh độ: ' + position.coords.longitude + '<br/>Vĩ độ: ' + position.coords.latitude; }
	            }
	            else { }
	            // Lấy thời gian -----------------------------------------------------------------------------------------------------------------------------------
	            var datathoigian = document.getElementById('thoigian');
	            var now = new Date();
	            var now_utc = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
	            document.write(now_utc.toString());
	            datathoigian.innerHTML = '<b>Local time: </b>' + now.toString();
	            datathoigian.innerHTML += '<br/><b>UTC/GMT: </b>' + now_utc.toString();
	            // -------------------------------------------------------------------------------------------------------------------------------------------------
	        });
	    }
	    // onError Callback receives a PositionError object
	    function onError(error) {
	    }
	</script>
</head>
<body>
	<!-- Start Header -->
	<div data-role="header" data-theme="f" class="ntcHeader" data-position="fixed">
		<h1 style="text-transform: capitalize;"><b>VỊ TRÍ</b></h1>
		<a href="start.html" data-ajax="false" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<a data-ajax="false" href="about.html" data-icon="info" data-iconpos="notext" data-transition="slideup">About</a>
	</div>
	<p id="geolocation" style="margin: 10px; text-align: center;">Đang dò tìm vị trí của bạn...</p>
	
	<div data-role="collapsible-set" id = "datacontent" style="display: none;">
	<marquee><h4>Tính năng sẽ được nâng cấp sau!</h4></marquee>
		<div id="vitri" data-role="collapsible" data-collapsed="true" data-theme="e">
			<h3>Vị trí</h3>
			<p id="datavitri"><a onclick="gotoMap()" data-role="button" data-theme="b">Xem trên bản đồ</a><br/></p>
		</div>
		<div data-role="collapsible">
			<h3>Thời gian</h3>
			<p id="thoigian"></p>
		</div>
		<div data-role="collapsible" data-theme="e">
			<h3>Thời tiết</h3>
			<p>Thời tiết sẻ được cập nhật tại đây</p>
		</div>
	</div>
</body>
</html>